<template>
	<div id="box">
    <seach @seach="mainSeach" :data='page'></seach>
		<el-table
    	:data="ygData"
    	style="width: 100%">
    	<el-table-column type="expand">
     	 <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="部门">
            <span>{{ props.row.store_name }}</span>
          </el-form-item>
          <el-form-item label="职位">
            <span>{{ props.row.job_name }}</span>
          </el-form-item>
          
          <el-form-item label="姓名">
            <span>{{ props.row.name }}</span>
          </el-form-item>
          <el-form-item label="员工编号">
            <span>{{ props.row.number }}</span>
          </el-form-item>
          <el-form-item label="登录密码">
            <span>{{ props.row.password }}</span>
          </el-form-item>
          <el-form-item label="基本工资">
            <span>{{ props.row.base_salary }}</span>
          </el-form-item>
          <el-form-item label="身份证号">
            <span>{{ props.row.id_card }}</span>
          </el-form-item>
          <el-form-item label="联系电话">
            <span>{{ props.row.tel }}</span>
          </el-form-item>
          <el-form-item label="性别">
            <span>{{ props.row.sex }}</span>
          </el-form-item>
          <<el-form-item label="权限级别">
            <span>{{ props.row.role_name }}</span>
          </el-form-item> 
        </el-form>
      	</template>
    	</el-table-column>
    	<el-table-column
      	label="员工编号"
     	 prop="number">
    	</el-table-column>
    	<el-table-column
      	label="姓名"
      	prop="name">
    	</el-table-column>
    	<el-table-column
      	label="性别"
      	prop="sex">
   		</el-table-column>
   		<el-table-column
      	label="联系电话"
      	prop="tel">
   		</el-table-column>
   		<el-table-column label="操作" width="160">
      		<template slot-scope="scope">
       	 	<el-button
          	size="mini"
            :disabled='scope.row.role_name==="超级管理员"'
          	@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        	<el-button
          	size="mini"
            :disabled='scope.row.role_name==="超级管理员"'
          	type="danger"
          	@click="handleDelete(scope.$index, scope.row)">删除</el-button>
      		</template>
    		</el-table-column>
  		</el-table>
  		<el-pagination
  		background
  		:page-size='5'
      :current-page='page'
      @current-change="getpage"
  		:hide-on-single-page='true'
  		layout="prev, pager, next"
  		:total="total">
		</el-pagination>
		<el-drawer
  			:visible.sync="drawer"
  			:direction="direction"
  			:before-close="handleClose"
  			:wrapperClosable='false'
  			size='100%'>
  			<edit @text='change' @close="on" :edit-data='editData'></edit>
        <!-- <button @click="close">dianjia</button> -->
		</el-drawer>
	</div>
</template>
<script>
	import edit from './Ygedit'
  import seach from './Seach'
  import { mapState,mapActions} from 'vuex'
 	export default{
		name:'query',
		components:{
			edit,
      seach
		},
		data(){
			return{
				// 部门 姓名 编号 密码 基本工资 性别 联系电话  身份证 群组角色

				direction:'ttb',
				drawer:false,
				editData:{},
				zhixiang:{},//指向选中的row数据 
        arr:[],
        page:1,
			}
		},
    computed:{
      ...mapState({
        yggl:state=>state.login.yggl
      }),
      total(){
        return this.yggl.count
      },
      ygData(){
        this.arr = []
        if(this.yggl.tableData instanceof Array){
          this.yggl.tableData.filter(item=>{
            this.arr.push(item)
          })
          // this.arr = this.yggl.tableData
        }else{
          this.arr.push(this.yggl.tableData)
        }
        // console.log(this.arr)
        this.arr.filter(item=>{
          // console.log(item.sex)
          if(item.sex==1){
            item.sex = '男'
          }else if(item.sex == 2){
            item.sex = '女'
          }
          // console.log(item.sex)
          if(item.role_name === '超级管理员'){
            item.password = '*******'
          }
        })
        return this.arr
      }
    },
		methods:{
      on(){
        this.drawer = false
        this.$message({
            showClose: true,
            message: '修改成功!',
            type: 'success'
        });
      },
      ...mapActions(['actGetygData','delyg','actGetSelectData','seachYg']),
			handleEdit(index,row){
				this.drawer = true
				let obj = {}
				for(let key in row){
					obj[key] = row[key]
					// this.editData[key] = row[key] ??????????????? why
				}
				this.zhixiang = row
				this.editData = obj
			},
			handleDelete(index,row){
        //提示用户确认删除
        //后台返回数据判断删除是否成功
        let obj = {
          number:row.number,
          index:index
        }
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          this.delyg(obj).then(res=>{
          if(res==='200'){
            if(this.ygData.length===1){
              this.page--
              let num = (this.page-1)*5
              this.actGetygData(num)
            }else{
              let num = (this.page-1)*5
              this.actGetygData(num)
            }
            this.log('删除了员工'+row.name+'的数据')
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }
          })
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
        console.log(row.number)
        
        // this.molishuju.splice(index,1)
        
			},
			handleClose(done){
				//抽屉关闭之前
        		this.$confirm('确定退出前请保存修改？', '确认退出', {
          		distinguishCancelAndClose: true,
          		confirmButtonText: '确定',
          		cancelButtonText: '取消'
        		})
          		.then(() => {
                done()

              })
              .catch(() => {

              });
			},
			change(data){
        console.log(this.yggl.tableData)
        console.log(data)
        for(let key in data){
          this.zhixiang[key] = data[key]
        }
        console.log(this.zhixiang)
        // this.arr.fliter(item=>{
        //   if(item.number === data.number){
        //     for(let key in data){
        //         item[key] = data[key]
        //     }
        //   }
        // })
			},
      getpage(val){
        // console.log(val)
        this.page = val
        console.log(this.page)
        let num = (val-1)*5
        this.actGetygData(num)
      },
      mainSeach(obj){
        this.seachYg(obj).then(res=>{
          if(res!=='200'){
            this.$message({
              showClose: true,
              message: '查询失败!',
              type: 'error'
            });
          }
        })
      }
		},
    created(){
      this.$store.dispatch('actGetygData')
      this.actGetSelectData()
    }
	}
</script>
<style scoped lang="less">
	.demo-table-expand {
    font-size: 0;
  	}
  	.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  	}
  	.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  	}
</style>